<template>
    <section>
        <!--工具条-->
        <el-row :gutter="20">
            <el-col :lg="12" :md="24">
                <div class="grid-content bg-purple">
                    <div class="dev-title">设备概述</div>
                </div>
                <div style="padding:12px 15px;height: 300px;" class="col-bg clearfix">
                    <el-col :span="12">
                        <div class="device_img"> <img :src="imgUrl?imgUrl:require('../../assets/79761007764060c4e63247c8f2a32ab.png')"></div>

                    </el-col>
                    <el-col :span="12">
                        <div class="device_p">
                            <div class="device_title">
                                <h4 class="ng-binding">{{facility.name}}</h4>
                                <p class="ng-binding">{{facility.deviceSn}}</p>
                            </div>
                            <p class="ng-binding"><label class="ng-binding">所属用户：</label>{{facility.deviceUserName}}</p>
                            <p class="ng-binding"><label class="ng-binding">设备类型：</label>{{facility.deviceTypeName}}</p>
                            <p class="ng-binding"><label class="ng-binding">网关型号：</label>{{facility.deviceModelName}}</p>
                            <!-- <p class="ng-binding"><label class="ng-binding">厂商：</label>{{facility.companyName}}</p> -->
                            <!-- <p class="ng-binding"><label class="ng-binding">所属终端用户：</label>{{facility.terminalUserName}}</p> -->
                            <!-- <p class="ng-binding"><label class="ng-binding">采集频率：</label>1分钟</p> -->
                            <p class="ng-binding"><label class="ng-binding">信号强度： </label>
                                <img v-if="wife<=1" src="../../assets/img/wifi1.png">
                                <img v-else-if="wife<=2" src="../../assets/img/wifi2.png">
                                <img v-else-if="wife<=4" src="../../assets/img/wifi3.png">
                                <img v-else src="../../assets/img/wifi4.png">
                            </p>

                            <p class="ng-binding"><label class="ng-binding">在线状态：</label>{{facility.stateText}}</p>
                            <!-- <p class="ng-binding"><label class="ng-binding">设备地址：</label>{{facility.deviceLocation.city}}</p> -->
                        </div>
                    </el-col>
                </div>
            </el-col>
            <el-col :lg="12" :md="24">
                <div class="grid-content bg-purple">

                    <div class="dev-title">设备地图</div>
                </div>
                <div style="padding:12px 15px" class="col-bg clearfix">
                    <div id="allmap" ref="allmap"></div>
                </div>
            </el-col>
            <el-col :span="24" class=" clearfix">
                <div class=" pb-top  clearfix">
                    <el-col :span="24" class="toolbar" style="padding:10px 10px 0 10px">
                        <el-form :inline="true" :model="filters">
                            <el-form-item>
                                <el-input v-model="selectlist.name" @change="search" placeholder="数据点名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="selectlist.register" @change="search" placeholder="数据点地址"></el-input>
                            </el-form-item>
                            <el-form-item>

                                <el-select v-model="selectlist.writeRead" placeholder="读写" @change="search" size="mini">

                                    <el-option label="不限" key='' value=''></el-option>
                                    <el-option key="0" label="读" value="0"></el-option>
                                    <el-option key="1" label="读写" value="1"></el-option>
                                    <!-- <el-option key="2" label="读写" value="2"></el-option> -->
                                   
                                </el-select>
                                <el-select v-model="selectlist.dataType" @change="search" placeholder="数据类型" size="mini">

                                    <el-option label="不限" key='' value=''></el-option>
                                    <el-option key="0" label="数值型" value="0"></el-option>
                                    <el-option key="1" label="开关型" value="1"></el-option>
                                    <el-option key="2" label="字符型" value="2"></el-option>
                                   
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" v-on:click="search">查询</el-button>
                            </el-form-item><br />
                            <el-form-item>
                                数据点总数:{{hande_device_list.length}} 告警点数量：{{AlarmNum}}
                            </el-form-item>
                        </el-form>
                    </el-col>

                    <!--列表-->



                    <!--工具条-->

                </div>
                <div class="grid-content bg-purple">
                    <div class="dev-title">数据点概况</div>
                </div>

                <div class="col-bg clearfix">
                    <el-row :gutter="10">
                        <el-col :lg="12" :md="24" v-for="(item,index) in hande_device_list" style="padding: 5px;">
                            <el-rpw style="background: #eee;padding: 5px 0 0 10px;" class="clearfix">
                                <el-col :xs="12" :sm="6">
                                    <div style="color: #000">{{item.name}}</div>
                                    <div>数据点地址:{{item.register}}</div>
                                </el-col>

                                <el-col :xs="12" :sm="4">
                                    <div style="color: #000">从机名称</div>
                                    {{item.deviceSlaveName}}
                                </el-col>
                                <el-col :xs="12" :sm="2" style="text-align: left;">
                                    <div v-if="facility.state==1">
                                        <div style="color: #000">状态</div>
                                        <span v-if="item.communicateState==0" class="pb-colorbg bg-green" title="正常"></span>
                                        <span v-if="item.communicateState==1" class="pb-colorbg bg-red" title="故障"></span>
                                        <span v-if="item.communicateState==null" class="pb-colorbg bg-gray" title="未知"></span>
                                    </div>
                                    <div v-else>
                                        <span class="pb-colorbg bg-gray" title="离线"></span>
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="3">
                                    {{item.updateTime}}
                                </el-col>

                                <el-col :xs="12" :sm="3" style="min-heigth:20px">
                                    <div v-if="item.dataType==1  ">
                                        <el-tooltip v-if="item.registerVal==0||item.registerVal==1" :content="'开关'">
                                            <el-switch  @change="scade(index, item)"
                                                v-model="item.registerVal" :disabled="item.writeRead==0||menubt.indexOf('/device/cmd')==-1"
                                                active-value="1" inactive-value="0">
                                            </el-switch>

                                        </el-tooltip>
                                        <div v-else>无效</div>
                                    </div>
                                    <span v-if="item.dataType!=1">
                                        <div>当前值：</div>
                                        <span style="font-size:16px;font-weight: bold">{{item.registerVal}}</span><span
                                            v-if="item.unit">({{item.unit}})</span>

                                    </span>
                                </el-col>
                                <el-col :xs="12" :sm="2" style="min-height:40px;">
                                    <img v-if="item.picturePath" :title="item.deviceRecipePictureGroupText" :src="item.picturePath"
                                        style="width: 40px;height: 40px;">
                                    <span v-else>{{item.pictureRemark}}</span>
                                    <!-- <i v-if="" class="i-fine"></i>
                                    <i v-if="" class="i-bad"></i> -->
                                </el-col>
                                <el-col :xs="12" :sm="4">
                                    <span v-if="item.writeRead==1 && item.dataType!=1&&menubt.indexOf('/device/cmd')>-1">
                                        <i title="写数据点值" @click="fromedit(index,item)" type="warning" class="pb-icon icon-bianji"></i>
                                    </span>
                                    <span v-else>
                                        <i title="禁止使用" type="warning" class="pb-icon icon-bianjino"></i>
                                    </span>
                                    <!-- <i v-if="menubt.indexOf('/devices/history')>-1" @click="handlehisty(index, item)" title="历史查询" circle class="pb-icon icon-lishi"></i> -->
                                    <i v-if="menubt.indexOf('/device/cmd')>-1" @click="scade1(index, item)" circle
                                        title="主动采集" class="pb-icon icon-caiji"></i>

                                </el-col>
                            </el-rpw>
                        </el-col>
                        <!-- <el-col :span="24" class="toolbar">
                          
                            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10"
                                :total="total" style="float:right;">
                            </el-pagination>
                        </el-col> -->
                    </el-row>
                </div>
            </el-col>

        </el-row>

        <!--列表-->
        <!--编辑界面-->
        <el-dialog title="编辑" v-show="editFormVisible" v-model="editFormVisible" @close="editFormVisible=false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="editForm" label-width="80px" ref="editForm">
                    <el-form-item label="数据点值" prop="name">
                        <el-input v-model="value2" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">
                    <el-button @click.native="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="editSubmit">提交</el-button>
                </div>
            </div>
        </el-dialog>

    </section>
</template>
<script>
    import {
        device_get,
        device_recipe_body_list,
        device_cmd,
        device_recipe_picture_query_body,
        device_getDeviceAlarmNum
    } from '../../api/api';
    //import NProgress from 'nprogress'
    export default {
        data() {
            return {
                total: '',
                wife: '',
                imgUrl: '',
                editForm: '',
                editFormVisible: false,
                value2: '',
                device_list: '',
                device_lists: '',
                hande_device_list: [],
                filters: {
                    name: ''
                },
                loading: false,
                users: [],
                facility: {},
                selectlist: {
                    name: '',
                    writeRead: '',
                    dataType: '',
                    register: ''
                },
                t: '',
                page: 1,
                AlarmNum: ''
            }
        },
        methods: {
            search() {
                this.hande_device_list = [];
                for (let i in this.device_list) {
                    // if(this.selectlist.name==res.data.)
                    if (this.device_list[i].name.indexOf(this.selectlist.name) >= 0) {
                        if (this.device_list[i].register.indexOf(this.selectlist.register) >= 0) {
                            if (this.device_list[i].dataType == this.selectlist.dataType || this.selectlist.dataType ==
                                '') {
                                if (this.device_list[i].writeRead == this.selectlist.writeRead || this.selectlist.writeRead ==
                                    '') {
                                    this.hande_device_list.push(this.device_list[i]);
                                }
                            }
                        }
                    }

                }

                this.total = this.hande_device_list.length;
                // this.total = this.device_list.length;

                // this.selectget();
            },
            handleCurrentChange(val) {
                this.page = val;
            },
            handleSave1(s) {
                console.log(s)
                if (s.deviceId == sessionStorage.getItem('facility_details')) {
                    let para = {
                        deviceId: sessionStorage.getItem('facility_details')
                    };
                    this.getbodylist();
                    device_get(para).then((res) => {
                         this.begCode(res.code,res.message);
                        this.wife = this.formatwife(res.data.deviceAttr)


                        //NProgress.done();
                    });
                    device_getDeviceAlarmNum(para).then((res) => {
                        //  this.begCode(res.code,res.message);
                        this.AlarmNum = JSON.parse(res.data).alarmNum;
                        console.log(JSON.parse(res.data).alarmNum)

                        //NProgress.done();
                    });
                }
            },
            selectget() {
                let tosize1 = 10 * (this.page - 1)
                let tosize2 = 10 * this.page;
                if (this.device_list) {

                    this.hande_device_list = this.device_list.slice(tosize1, tosize2);
                    console.log(this.hande_device_list)

                }

            },
            scade1(index, row) {

                let para = {
                    code: 'getRegisterData',
                    deviceIdList: [sessionStorage.getItem('facility_details')],
                    attrs: {
                        deviceSlaveSn: this.users[0].slaveSn,
                        registerFirstAddr: row.register,
                        count: 1
                    }
                };
                this.loading = true;
                //NProgress.start();
                device_cmd(para).then((res) => {
                     this.begCode(res.code,res.message);
                    this.$message({
                        message: '下发命令成功',
                        type: 'success'
                    });
                    this.getbodylist();
                    //NProgress.done();
                });
            },
            scade(index, row) {

                // this.$confirm('确认更换吗？', '提示', {}).then(() => {
                let para = {
                    code: 'writeRegisterData',
                    deviceIdList: [sessionStorage.getItem('facility_details')],
                    attrs: {
                        deviceSlaveSn: row.slaveSn,
                        register: row.register,
                        registerVal: row.registerVal,
                        deviceType: 1
                    }
                };
                this.loading = true;
                //NProgress.start();
                device_cmd(para).then((res) => {
                     this.begCode(res.code,res.message);

                    this.getbodylist();
                    //NProgress.done();
                });
                // });
            },
            fromedit(index, row) {
                if (this.menubt.indexOf('/device/cmd') == -1) {
                    this.$message({
                        message: '您没有下发命令的权限',
                        type: 'warning'
                    });
                    return false;
                }
                this.editFormVisible = true;
                this.editForm = row;
            },
            editSubmit() {

                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    let para = {
                        code: 'writeRegisterData',
                        deviceIdList: [sessionStorage.getItem('facility_details')],
                        attrs: {
                            deviceSlaveSn: this.editForm.slaveSn,
                            register: this.editForm.register,
                            registerVal: this.value2
                        }
                    };
                    this.loading = true;
                    //NProgress.start();
                    device_cmd(para).then((res) => {
                         this.begCode(res.code,res.message);

                        this.loading = true;
                        this.$message({
                            message: '下发命令成功',
                            type: 'success'
                        });
                        this.editFormVisible = false;
                        //NProgress.done();

                        this.value2 = '';
                    });
                });
            },
            //            tableHeaderColor({
            //     row,
            //     column,
            //     rowIndex,
            //     columnIndex
            // }) {
            //     if (rowIndex === 0) {
            //         return 'background-color: #eee;font-weight: 500;'
            //     }
            // },
            //性别显示转换
            handlehisty: function (index, row) {

                sessionStorage.setItem('pointid', row.register)
                this.$router.push({
                    path: "/devices/history"
                });
            },
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            formatwife(row) {
                // if (row) {
                //     return row.signalIntensity == 0 ? '很弱' : row.signalIntensity == 1 ? '弱' : row.signalIntensity == 2 ?
                //         '一般' : row.signalIntensity ==
                //         3 ? '普通' : row.signalIntensity == 4 ? '强' : row.signalIntensity == 5 ? '很强' : ' 未知';
                // } else {
                //     return '未知';
                // }
                if (row) {
                    return row.signalIntensity;
                } else {
                    return 0;
                }


            },
            map1() {
                let map = new BMap.Map(this.$refs.allmap); // 创建Map实例
                // map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
                map.enableScrollWheelZoom();
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
                map.addControl(
                    new BMap.MapTypeControl({
                        //添加地图类型控件
                        mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                    })
                );

                // var map = new BMap.Map("container");
                var point = new BMap.Point(this.facility.deviceLocation.longitude, this.facility.deviceLocation.latitude);

                let s = this.convert(point);
                map.centerAndZoom(s, 15);
                var marker = new BMap.Marker(s); // 创建标注    
                map.addOverlay(marker);
                var opts = {
                    width: 200, // 信息窗口宽度
                    height: 100, // 信息窗口高度
                    title: "地址信息", // 信息窗口标题
                    enableMessage: true, //设置允许信息窗发送短息
                    message: this.facility.deviceLocation.address + "~"
                }
                var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象    
                map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
                map.addOverlay(marker); // 将标注添加到地图中

                var infoWindow = new BMap.InfoWindow("地址:" + this.facility.deviceLocation.address, opts); // 创建信息窗口对象 
                marker.addEventListener("click", function () {
                    map.openInfoWindow(infoWindow, s); //开启信息窗口

                });

                // map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
                // map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

            },
            //获取用户列表
            getUser: function () {

                let para = {
                    deviceId: sessionStorage.getItem('facility_details')
                };
                this.loading = true;
                //NProgress.start();
                device_get(para).then((res) => {
                    // res.code=403;
                     this.begCode(res.code,res.message);
                    this.users = res.data.deviceSlaveList;
                    this.facility = res.data;
                    this.wife = this.formatwife(res.data.deviceAttr);
                    this.loading = false;
                    if (res.data.devicePictureList[0].path) {

                        this.imgUrl = res.data.devicePictureList[0].path;
                    } else {
                        // this.imgUrl = '../../assets/img/wifi1.png';
                    }
                    this.map1()
                    //NProgress.done();
                });
                device_getDeviceAlarmNum(para).then((res) => {
                    //  this.begCode(res.code,res.message);
                        this.AlarmNum = JSON.parse(res.data).alarmNum;

                    //NProgress.done();
                });
                this.getbodylist()
                this.t = setInterval(() => {
                    //     let para = {
                    //     deviceId: sessionStorage.getItem('facility_details')
                    // };
                    //     this.getbodylist();
                    //     device_get(para).then((res) => {
                    //          this.begCode(res.code,res.message);
                    //         this.wife = this.formatwife(res.data.deviceAttr)


                    //         //NProgress.done();
                    //     });

                }, 5000)

            },
            getbodylist() {

                let para = {
                    deviceId: sessionStorage.getItem('facility_details')
                };
                device_recipe_body_list(para).then((res) => {
                     this.begCode(res.code,res.message);

                    for (let i in res.data) {


                        let para1 = {
                            deviceRecipePictureGroupId: res.data[i].deviceRecipePictureGroupId
                        };

                        // if (res.data[i].registerVal) {
                        //     if (res.data[i].decimalAccuracy) {
                        //         res.data[i].registerVal = parseFloat(res.data[i].registerVal / Math.pow(10,
                        //             res.data[i].decimalAccuracy).toPrecision(12));


                        //         if (res.data[i].decimalAccuracy == 1) {
                        //             res.data[i].registerVal = res.data[i].registerVal.toFixed(1)
                        //         }
                        //     }
                        //}

                        // this.devide_list[i].registerVal=this.devide_list[i].registerVal/


                    }
                    let ti = setTimeout(() => {

                        // this.updatelist();
                        // this.device_list = res.data;
                        this.device_list = res.data;
                        this.search()

                        return false;


                    }, 300);
                    // this.loading = false;
                    //NProgress.done();
                });
            }
        },
        mounted() {

            this.menubt = localStorage.getItem('menubt');
            this.getUser();
        },
        destroyed: function () {
            clearInterval(this.t)
        },
    };
</script>

<style scoped>
    .userlist {
        font-size: 14px;
    }

    #allmap {
        height: 300px;
        overflow: hidden;
    }

    .el-row {
        margin-bottom: 0;
        font-size: 12px;
    }

    .el-col {
        border-radius: 4px;
        margin-bottom: 0px;
    }

    .el-row>.el-col {
        border-radius: 4px;
        margin-bottom: 0;
    }



    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .dev-select {
        width: 100px;
        float: right;
        margin: 3px;
    }

    .dev-title {
        display: inline-block;
        line-height: 36px;
        text-indent: 10px;
        color: #fff
    }

    .device_img {
        width: 100%;
        height: auto;
        text-align: center;
        margin-bottom: 15px;
        border: 1px solid #eee;
    }

    .device_img img {
        max-height: 300px;
        width: 100%;
    }

    .col-bg {
        padding: 12px 15px;
        position: relative;
        height: 100%;
        color: #666666;
        background-color: #ffffff;
        border: none;
        border-radius: 5px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        position: relative;
        margin-bottom: 20px;
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
    }

    .device_title {
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
    }

    .device_title h4 {
        line-height: 30px;
        font-size: 16px;
        color: #333;
        margin: 0 auto;
    }

    .device_title p {
        line-height: 30px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #666;
    }

    .device_p p {
        line-height: 26px;
        margin: 0;
        color: #333;
        font-size: 12px;
    }

    .monitor_data_list2 {
        line-height: 26px;
        padding: 15px 0;
        font-size: 12px;
        color: #000;
        clear: both;
        margin: 10px 0;
        background: #eee;
    }

    .el-table tr {
        position: absolute;
        top: 100px
    }

    .el-table {

        background-color: #eee !important;
    }

    .cell {
        padding-left: 10px !important;
    }

    .ng-binding img {
        vertical-align: middle
    }

    .el-col {
        /* min-height: 10px */
        height: 100%;
    }

    .pb-colorbg {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%
    }

    .bg-green {
        background: green
    }

    .bg-red {
        background: red;
    }

    .bg-gray {
        background: #666;
    }
</style>